<template>
  <Modal v-model="showModal" title="广告位预览" footer-hide width="70%">
    <div class="modal_box">
      <div style="display: flex">
        <div style="width: 92%">
          <dt-search ref="search" :showBtn="false" :xl="7"></dt-search>
        </div>
        <Button type="primary" @click="exportBtn">导出</Button>
      </div>

      <dt-grid ref="table" :columns="columns" :onFetch="onFetch" :height="460"></dt-grid>
    </div>
    <div class="btn_box">
      <Button @click="close">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import SearchOpt from '../opt/modalSearch.js'
  import modalColumn from '../opt/modalColumn.js'
  import adMgr from '@/biz/backStage/advertisement'
  export default {
    data() {
      return {
        showModal: false,
        columns: [],
        params: {
          orgIds: [],
          port: ['1'],
          fullAd: []
        },
        needData: {}
      }
    },

    methods: {
      onFetch() {
        return adMgr.getAdvPreview(this.needData).then((res) => {
          return res
        })
      },
      getTableData() {
        console.log('查看参数', this.params)
        this.needData = {
          orgIdList: this.params.orgIds,
          fullAdvertisement: this.params.fullAd.length > 0,
          portList: this.params.port.includes('1') ? null : this.params.port
        }
        this.$refs.table.fetch()
      },
      async show(id) {
        this.$refs.search.init(this.$refs.table, new SearchOpt(this), this.params)
        if (id) {
          let res = await adMgr.getAdvertisementById({ id })
          this.params.orgIds = res.orgIdList
          this.params.port = res.portList
          this.params.fullAd = ['fullAd']
        } else {
          this.params.orgIds = []
          this.params.port = ['1']
          this.params.fullAd = []
        }
        this.columns = modalColumn.options(this)
        this.$refs.table.init(this)
        this.showModal = true
      },
      close() {
        this.showModal = false
      },
      exportBtn() {
        adMgr.advPreviewExport(this.needData).then((res) => {
          console.log('导出数据')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn_box {
    padding-top: 20px;
    text-align: right;
  }
</style>
